<template>
    <div>
        <div class="infoIpt">
            <a-row>
                <a-col span="24">
                    <a-icon type="left-circle" theme="filled"  style="font-size: 30px; color: #48D3A4;"  @click="back"/>
                </a-col>
            </a-row>
            <br/>
            <a-row :gutter="16" style="margin: 0 10px;">
                <a-col span="4" style="text-align: center">
                    <a-avatar shape="square" :size="240" :src="talentInfo.talentPhoto ? talentInfo.talentPhoto : photo" />
                </a-col>
                <a-col span="14">
                    <a-row>
                        <a-col span="24" style="color: rgba(3, 129, 129, 1); font-size: 28px; height: 40px;">{{talentInfo.talentRealName}}</a-col>
                    </a-row>
                    <a-row>
                        <a-col span="24" style="font-weight: bold;">
                            <a-card style="border-radius: 10px; line-height: 40px; margin-top: 20px; font-size: 16px; height: 180px; background: linear-gradient(90.57deg, rgba(147,227,201,1) 0.48%,rgba(147,227,227,0) 99.2%);">
                                <a-row>
                                    <a-col span="24"><div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">所属单位：{{talentInfo.talentCompany}}</div></a-col>
                                </a-row>
<!--                                <a-row>-->
<!--                                    <a-col span="6"><div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">所属单位：{{talentInfo.talentCompany}}</div></a-col>-->
<!--                                    <a-col span="6">联系电话：{{talentInfo.talentPhoneNumber}}</a-col>-->
<!--                                    <a-col span="6">职级：{{-->
<!--                                            talentInfo.titleLevel == null ? '' :-->
<!--                                                talentInfo.titleLevel == 1 ? '员级' : talentInfo.titleLevel == 2 ? '助级' : talentInfo.titleLevel == 3 ? '中级' :-->
<!--                                                    talentInfo.titleLevel == 4 ? '副高级' : talentInfo.titleLevel == 5 ? '正高级' : ""-->
<!--                                        }}</a-col>-->
<!--                                    <a-col span="6">职称：{{-->
<!--                                            talentInfo.theTitle == null ? '' :-->
<!--                                                talentInfo.theTitle == 1 ? '基础员' : talentInfo.theTitle == 2 ? '助理工程师' : talentInfo.theTitle == 3 ? '中级工程师' :-->
<!--                                                    talentInfo.theTitle == 4 ? '副高级工程师' : talentInfo.theTitle == 5 ? '正高级工程师' : ""-->
<!--                                        }}</a-col>-->
<!--                                </a-row>-->
                                <a-row>
<!--                                    <a-col span="6">性别：{{talentInfo.gender}}</a-col>-->
<!--                                    <a-col span="6">身份证号：*****</a-col>-->
                                    <a-col span="18"><div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">所在学科：{{talentInfo.researchDomain}}</div></a-col>
                                    <a-col span="6"><div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">联系电话：{{talentInfo.talentPartPhoneNumber}}</div></a-col>
                                </a-row>
                                <a-row>
                                    <a-col span="24"><div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" :title="talentInfo.gwFieldNames">研究领域：{{talentInfo.gwFieldNames}}</div></a-col>
                                </a-row>
<!--                                <a-row>-->
<!--                                    <a-col span="6">邮箱：{{talentInfo.mail}}</a-col>-->
<!--                                    <a-col span="6">国籍：{{talentInfo.nationality}}</a-col>-->
<!--                                    <a-col span="6">政治面貌：{{talentInfo.politicsStatus}}</a-col>-->
<!--                                </a-row>-->
                            </a-card>
                        </a-col>
                    </a-row>
                </a-col>
                <a-col span="6">
                    <a-card style="border-radius: 10px; font-weight: bold; height: 240px; background: linear-gradient(135.14deg, rgba(203,234,228,0.5) -0.75%,rgba(55,176,187,0.5) 100.8%);">
                        <a-row>
                            <a-col span="24" style="color: #038181"><a-icon type="tags" theme="filled" />&nbsp;&nbsp;&nbsp;研究标签</a-col>
                        </a-row>
                        <br/>
                        <div style="display: inline-block; float: left; padding-right: 10%; line-height: 30px;color: #FD8024;" v-for="item in researchTags">{{item}}</div>
                    </a-card>
                </a-col>
            </a-row>
            <template  v-if="talentInfo.intro != null">
                <a-card class="cardTit">
                    个人介绍
                </a-card>
                <br/>
                <a-card style="border-radius: 20px; margin: 0 10px; font-size: 16px;">
                    <template v-if="talentInfo.intro == null">
                        <a-empty/>
                    </template>
                    <template v-else>
                        {{talentInfo.intro}}
                    </template>
                </a-card>
            </template>
            <a-card class="cardTit">
                专家研究演化
            </a-card>
            <br/>
            <a-row :gutter="16">
                <a-col span="14">
                    <a-card dis-hover style="height: 820px; margin-left: 10px; border-radius: 20px; ">
                        <a-row>
                            <a-col span="24" style="color: #038181; font-weight: bold; font-size: 16px;"><a-icon type="stock" />&nbsp;&nbsp;&nbsp;专家能力演化</a-col>
                        </a-row>
                        <div>
                            <div ref="researchCharts" style=" height: 750px; width: 100%;"></div>
                        </div>
                    </a-card>
                </a-col>
                <a-col span="10">
                    <a-card dis-hover style="height: 350px; margin-right: 10px; border-radius: 20px; ">
                        <a-row>
                            <a-col span="24" style="color: #038181; font-weight: bold; font-size: 16px;"><a-icon type="align-left" />&nbsp;&nbsp;&nbsp;研究领域关联</a-col>
                        </a-row>
                        <div>
                            <div ref="researchFieldChart" style=" height: 350px; width: 100%;"></div>
                        </div>
                    </a-card>
                    <a-card dis-hover style="height: 450px; border-radius: 20px; margin-top: 15px;">
                      <a-row>
                        <a-col span="24" style="color: #038181; font-weight: bold; font-size: 16px;"><a-icon type="usergroup-delete" />&nbsp;&nbsp;&nbsp;合作学者</a-col>
                      </a-row>
                      <div>
                        <div ref="groupTalentCharts" style=" height: 400px; width: 100%;"></div>
                      </div>
                    </a-card>
                </a-col>
            </a-row>
            <a-card class="cardTit">
                个人成果
            </a-card>
            <br/>
            <a-row :gutter="16">
                <a-col span="14">
                    <a-card dis-hover size="small" style="margin-left: 10px; border-radius: 20px;">
<!--                        <a-row style="border-bottom: 1px solid #E8E8E8;">-->
<!--                            <a-col span="3" v-for="(item, index) in fruitTypeList">-->
<!--                                <div :class="['fruit-type-name', selectedFruitType == item.value ? 'fruit-type-name-append':'fruit-type-name-default',-->
<!--                              index == 0 ? 'typeRadius-left' : '', index == fruitTypeList.length-1 ? 'typeRadius-right' : '']" @click="changeType(item.value)">-->
<!--                                    {{item.name}}-->
<!--                                </div>-->
<!--                            </a-col>-->
<!--                        </a-row>-->
                        <a-row>
                            <a-col>
                                <div class="demo-spin-div" v-if="!isHaveData">
                                    <a-spin tips="">
                                        <div class="spin-content">
                                            成果数据加载中。。。
                                        </div>
                                    </a-spin>
                                </div>
                                <div v-if="isHaveData" style="padding: 20px 10px;">
                                    <a-col span="24">
                                        <div v-if="productions.dataList.length > 0" style="padding-left: 20px;">
                                            <div v-for="item in productions.dataList" :key="item.id">
                                                <a-row>
                                                    <a-col span="20">
                                                        <div class="ft" @click="showFruitInfo(item)">{{item.fruitName}}</div>
                                                    </a-col>
                                                    <a-col span="4" style="text-align: right;">
                                                        <a-tag color="#189583" style="font-size: 15px;border-radius: 10px;width: 100px;text-align: center;}">
                                  <span>{{
                                          item.type == '3' ? '研究报告':
                                              item.type == '4' ? '活动成果':
                                                  item.type == '5' ? '媒体成果':
                                                      item.type == '6' ? '学术论文':
                                                          item.type == '7' ? '图书出版':
                                                              item.type == '8' ? '荣誉信息':
                                                                  item.type == '11' ? '专利成果':
                                                                      item.type == '12' ? '软著成果': '其他成果'
                                      }}</span>
                                                        </a-tag>
                                                    </a-col>
                                                </a-row>
                                                <a-row style="margin-top: 5px;">
                                                    <a-col span="20">
                                                        <div style="display: inline-block;font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{item.allAuthorName}}</div>
<!--                                                        <div style="display: inline-block; font-size: 15px; padding-left: 30px;">{{item.orgName}}</div>-->
                                                    </a-col>
                                                    <a-col span="4" style="text-align: right; padding-right: 20px;">
                                                        <div style="font-size: 15px">{{item.pubTime.substring(0,10)}}</div>
                                                    </a-col>
                                                </a-row>
<!--                                                <a-row style="margin-top: 5px;">-->
<!--                                                    <a-col span="20">-->
<!--                                                        <div style="color: #189583; padding-right: 10px; font-size: 13px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ">{{item.field}}</div>-->
<!--                                                    </a-col>-->
<!--                                                    <a-col span="4" style="text-align: right; padding-right: 20px;">-->
<!--                                                        <div style="font-size: 15px">{{item.pubTime.substring(0,10)}}</div>-->
<!--                                                    </a-col>-->
<!--                                                </a-row>-->
                                                <a-divider />
                                            </div>
                                            <div class="pag">
                                                <a-pagination :current="currentPage" :total="parseInt(productions.total)" :show-total="total => `共 ${total} 条`" @change="onChangePage" />
                                            </div>
                                        </div>
                                        <div v-else>
                                            <div class="blankcon">
                                                <a-empty />
                                            </div>
                                        </div>
                                    </a-col>
                                </div>
                            </a-col>
                        </a-row>
                    </a-card>
                </a-col>
                <a-col span="10">
                    <a-card dis-hove style="margin-right: 10px; border-radius: 20px;">
<!--                        <a-row>-->
<!--                            <a-col span="24" style="color: #038181; font-weight: bold; font-size: 16px;"><a-icon type="tags" theme="filled" />&nbsp;&nbsp;&nbsp;成果统计</a-col>-->
<!--                        </a-row>-->
<!--                        <div>-->
<!--                            <div ref="fruitLineChart" style=" height: 550px; width: 100%;"></div>-->
<!--                        </div>-->
                        <a-row>
                            <a-col span="24" style="color: #038181; font-weight: bold; font-size: 16px;"><a-icon type="tags" theme="filled" />&nbsp;&nbsp;&nbsp;成果词云</a-col>
                        </a-row>
                        <div>
                            <word-cloud-index :data="wordData" :width="450" v-if="isHaveWordData"></word-cloud-index>
                        </div>
                    </a-card>
                    <a-card dis-hover style="height: 650px; margin-top: 10px; border-radius: 20px;">
                      <a-row>
                        <a-col span="24" style="color: #038181; font-weight: bold; font-size: 16px;"><a-icon type="usergroup-delete" />&nbsp;&nbsp;&nbsp;合作排名</a-col>
                      </a-row>
                      <div>
                        <div ref="groupRankCharts" style=" height: 600px; width: 100%;"></div>
                      </div>
                    </a-card>
                </a-col>
            </a-row>
<!--            <a-card class="cardTit">-->
<!--                相关学者-->
<!--            </a-card>-->
<!--            <br/>-->
<!--            <a-row :gutter="16">-->
<!--                <a-col span="12">-->
<!--                    <a-card dis-hover style="height: 650px; margin-left: 10px; border-radius: 20px;">-->
<!--                        <a-row>-->
<!--                            <a-col span="24" style="color: #038181; font-weight: bold; font-size: 16px;"><a-icon type="usergroup-delete" />&nbsp;&nbsp;&nbsp;合作学者</a-col>-->
<!--                        </a-row>-->
<!--                        <div>-->
<!--                            <div ref="groupTalentCharts" style=" height: 600px; width: 100%;"></div>-->
<!--                        </div>-->
<!--                    </a-card>-->
<!--                </a-col>-->
<!--                <a-col span="12">-->
<!--                    <a-card dis-hover style="height: 650px; margin-right: 10px; border-radius: 20px;">-->
<!--                        <a-row>-->
<!--                            <a-col span="24" style="color: #038181; font-weight: bold; font-size: 16px;"><a-icon type="usergroup-delete" />&nbsp;&nbsp;&nbsp;合作排名</a-col>-->
<!--                        </a-row>-->
<!--                        <div>-->
<!--                            <div ref="groupRankCharts" style=" height: 600px; width: 100%;"></div>-->
<!--                        </div>-->
<!--                    </a-card>-->
<!--                </a-col>-->
<!--            </a-row>-->
            <a-card class="cardTit">
                相关专家
            </a-card>
            <br/>
            <template v-if="talentRecommendData.length == 0">
                <a-empty/>
            </template>
            <template v-else>
                <a-row :gutter="16">
                    <a-col span="12" v-for="item in talentRecommendData">
                        <div style="margin-right: 10px; border-radius: 10px; border: 1px solid rgb(225 225 225);">
                            <a-row>
                                <a-col span="24" class="tjt">| {{item.field}}</a-col>
                            </a-row>
                            <a-row>
                                <a-col span="24" class="tct">推荐专家</a-col>
                            </a-row>
                            <a-row>
                                <a-col span="24"  class="ctc rd">
                                    <div v-if="item.fieldNames.length == 0">
                                        <a-empty />
                                    </div>
                                    <div v-else style="padding-left: 20px;">
                                        <a-row>
                                            <template v-for="et in item.fieldNames">
                                                <a-col span="4">
                                                    <a-tag style="font-size: 15px;border-radius: 10px;width: 100px; color: rgb(24, 149, 131); text-align: center; border: 1px solid rgb(24, 149, 131);}">
                                                        <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 35px; cursor: pointer" @click="showInfo(et.split(',')[1], et.split(',')[0])">{{et.split(",")[0]}}</div>
                                                    </a-tag>
                                                </a-col>
                                            </template>
                                        </a-row>
                                    </div>
                                </a-col>
                            </a-row>
                            <a-row>
                                <a-col span="24" class="tct">参考合作成果</a-col>
                            </a-row>
                            <a-row>
                                <a-col span="24" class="ctc">
                                    <div v-if="item.resultModelList.length == 0">
                                        <a-empty/>
                                    </div>
                                    <div v-else style="padding-left: 20px; line-height: 50px; height: 300px; overflow-y: auto;">
                                        <a-row>
                                            <template v-for="et in item.resultModelList">
                                                <a-col span="24" @click="showFruitInfo(et)" style="cursor: pointer; line-height: 50px; text-align: center;border-bottom: 1px solid #f5f5f5;">{{et.fruitName}}</a-col>
                                            </template>
                                        </a-row>
                                    </div>
                                </a-col>
                            </a-row>
                        </div>
                    </a-col>
                </a-row>
            </template>
            <div>
            </div>
        </div>
        <fruit-info ref="fruitInfo"></fruit-info>

        <div id="components-back-top-demo-custom">
            <a-back-top>
                <div class="ant-back-top-inner">
                    <a-icon type="up-circle" theme="filled" />
                </div>
            </a-back-top>
        </div>
    </div>
</template>

<script>

import * as echarts from "echarts";
import photo from './photo.png'
import { postAction } from '../../api/manage'
import fruitInfo from './FruitInfo.vue'
import wordCloudIndex from './wordCloud/wordcloudIndex.vue'

function getRandomArrayElements(arr, count) {
    let shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
    while (i-- > min) {
        index = Math.floor((i + 1) * Math.random());
        temp = shuffled[index];
        shuffled[index] = shuffled[i];
        shuffled[i] = temp;
    }
    return shuffled.slice(min);
}

export default {
    name: 'TalentInfo',
    components: {
        fruitInfo,
        wordCloudIndex
    },
    data() {
        return {
            photo: photo,
            loading: false,
            selectedAuthorId: "",
            selectedAuthorName: "",
            researchTags:[],
            talentInfo: {},
            currentYear: "",
            yearList: [],
            selectedFruitType: 6,
            currentPage: 1,
            searchObj:{
                pageNo: 1,
                pageSize: 10
            },
            fruitTypeList: [
                {"name": "学术论文", "value": 6},
                {"name": "研究报告", "value": 3},
                {"name": "图书出版", "value": 7},
                {"name": "活动成果", "value": 4},
                {"name": "媒体成果", "value": 5},
                {"name": "荣誉信息", "value": 8},
                {"name": "专利成果", "value": 11},
                {"name": "软著成果", "value": 12},
            ],
            isHaveData: true,
            productions: {
                dataList: []
            },
            isHaveWordData: false,
            wordData: [],
            talentRecommendData:[]
        }
    },
    computed: {
    },
    mounted() {
    },
    created() {
    },
    methods: {
        back(){
            this.$emit('toShowPhotoPage', false);
        },
        getYear(){
            this.yearList = [];
            //取最近5年
            let currentYear = new Date().getFullYear();
            this.currentYear = currentYear;
            for(let n in 10){
                this.yearList.push({"name": currentYear-n, "value": currentYear-n});
            }
        },
        showInfo(authorId, authorName){
            this.selectedAuthorId = authorId;
            this.selectedAuthorName = authorName;
            this.$nextTick(function(){
                this.getYear();
                this.getFruitData();
                this.getFruitWordCloudData();
                this.getTalentInfoData();
                // this.getProdChartData();
                this.getRelatedTalentData();

                setTimeout(() => {
                    this.getResearchFieldCharts();
                }, 1000);
            })

            window.scrollTo({
                top: 0,
                behavior: 'smooth', // 使用平滑滚动
            });
        },
        getTalentFieldTagData(){
            // let url = "/ndTalent/fruit/getTalentFieldTagData";
            //
            // let obj = {orgUserId : this.selectedAuthorId};
            // let that = this;
            // postAction(url, obj).then(res => {
            //     if (res.data.success) {
            //         let randomTags = getRandomArrayElements(res.data.result, 2);
            //         that.researchTags = res.data.result;
            //         that.getRecommendTalent(randomTags.map(item=>{return item.name;}));
            //     }
            // }).catch(err => {
            //     console.log(err)
            // })
            let resultArr = this.talentInfo.gwFieldKeywords? this.talentInfo.gwFieldKeywords.split(",") : null;
            if(resultArr){
              let randomTags = getRandomArrayElements(resultArr, 2);
              this.researchTags = getRandomArrayElements(resultArr, 8);
              this.getRecommendTalent(randomTags.map(item=>{return item;}));
            }
        },
        getTalentInfoData(){
            let url = "/ndTalent/talents/getTalentInfo";

            postAction(url, { id: this.selectedAuthorId}).then(res => {
                if (res.data.success) {
                    this.talentInfo = res.data.result
                    this.getTalentFieldTagData();
                }
            }).catch(err => {
                console.log(err)
            })
            this.getResearchChartsData();
        },
        getFruitData(){
            let url = "/ndTalent/fruit/list";

            this.isHaveData = false;
            this.searchObj.orgUserId = this.selectedAuthorId;
            this.searchObj.authorName = this.selectedAuthorName;
            this.searchObj.type = this.selectedFruitType;
            let that = this;
            postAction(url, this.searchObj).then(res => {
                if (res.data.success) {
                    that.productions.total = res.data.result.total
                    that.productions.dataList = res.data.result.records
                    that.isHaveData = true;
                }
            }).catch(err => {
                console.log(err)
                that.isHaveData = true;
            })
        },
        changeType(val){
            this.selectedFruitType = val;
            this.getFruitData(val);
        },
        onChangePage(value) {
            this.searchObj.pageNo = value;
            this.currentPage = value;
            this.getFruitData();

            window.scrollTo({
                top: 1500,
                behavior: 'smooth', // 使用平滑滚动
            });
        },
        getResearchChartsData() {
            let url = "/ndTalent/talents/getTalentResearchTrends";

            postAction(url, { id: this.selectedAuthorId }).then(res => {
                if (res.data.success) {
                    let data = res.data.result;
                    let legendData = [];
                    let seriesData = [];
                    for(let n in data){
                        let result = [];
                        result[0] = data[n].yearNum;
                        result[1] = data[n].count;
                        result[2] = data[n].name;
                        legendData.push(data[n].name);
                        // seriesData.push(result);
                    }
                    this.buildResearchCharts(Array.from(new Set(legendData)), data);
                }
            }).catch(err => {
                console.log(err)
            })
        },
        buildResearchCharts(legendData, seriesData) {
            let researchCharts = echarts.init(this.$refs.researchCharts);
            // researchCharts.setOption({
            //
            //   tooltip: {
            //     trigger: 'axis',
            //     axisPointer: {
            //       type: 'line',
            //       lineStyle: {
            //         color: 'rgba(0,0,0,0.2)',
            //         width: 1,
            //         type: 'solid'
            //       }
            //     }
            //   },
            //   legend: {
            //     data: legendData
            //   },
            //   singleAxis: {
            //     top: 50,
            //     bottom: 50,
            //     axisTick: {},
            //     axisLabel: {},
            //     type: 'time',
            //     axisPointer: {
            //       animation: true,
            //       label: {
            //         show: true
            //       }
            //     },
            //     splitLine: {
            //       show: true,
            //       lineStyle: {
            //         type: 'dashed',
            //         opacity: 0.2
            //       }
            //     }
            //   },
            //   series: [
            //     {
            //       type: 'themeRiver',
            //       emphasis: {
            //         itemStyle: {
            //           shadowBlur: 20,
            //           shadowColor: 'rgba(0, 0, 0, 0.8)'
            //         }
            //       },
            //       data: seriesData
            //     }
            //   ]
            // })
            this.buildResearchCategoryCharts(researchCharts, legendData, seriesData);
        },
        buildResearchCategoryCharts(researchCharts, legendData, seriesData){
            var groupedData = {};
            // 获取当前年份
            var currentYear = new Date().getFullYear();
            // 定义起始年份
            var startYear = currentYear - 9;
            // 创建一个数组用于存储近十年的年份
            var recentYearsArray = Array.from({ length: 10 }, (_, index) => startYear + index);
            // 遍历输入数据，按 name 进行分组
            seriesData.forEach(function(item) {
                if (!groupedData[item.name]) {
                    groupedData[item.name] = {};
                }

                // 使用 yearNum 作为属性，存储每个 yearNum 对应的 count 值
                groupedData[item.name][item.yearNum] = item.count;
            });
            // 转换为数组形式
            var newDataArray = [];
            // 遍历每个 name，构建新的数组结构
            for (var name in groupedData) {
                var newDataItem = {
                    name: name, // 使用 name 字段的值作为 name
                    type: 'line',
                    smooth: true,
                    data: []
                };
                // 遍历近十年的年份，如果数据存在就添加到 newDataItem 中，否则添加 0
                recentYearsArray.forEach(function(year) {
                    newDataItem.data.push(groupedData[name][year] || 0);
                });
                // 将 newDataItem 添加到新的数组结构中
                newDataArray.push(newDataItem);
            }

            // 生成不同的颜色
            function generateUniqueColors(count) {
                var colors = [];
                for (var i = 0; i < count; i++) {
                    var hue = (360 / count) * i;
                    var color = 'hsl(' + hue + ', 100%, ' + (i % 2 === 0 ? 30 : 70) + '%)';
                    colors.push(color);
                }
                return colors;
            }

            // 定义28种颜色
            var customColors = generateUniqueColors(28);

            researchCharts.setOption({
                color: customColors,
                legend: {
                    bottom: '1px',
                    data: legendData
                },
                grid: {
                    top: '50px',
                    bottom: '150px'
                },
                tooltip: {
                    alwaysShowContent: true,
                    trigger: 'axis',
                    extraCssText:'z-index: 7',
                    backgroundColor: '#FFFFFF',
                    textStyle:{
                        color: '#3c3520'
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: recentYearsArray
                },
                yAxis: {
                    type: 'value'
                },
                series: newDataArray
            }, true);


            setTimeout(function () {
                researchCharts.resize();
            }, 10)
        },
        getResearchFieldCharts(){
            // let url = "/ndTalent/fruit/getRelatedResearchFieldChart";
            let url = "/ndTalent/fruit/getRelatedResearchFieldPieChart";

            let obj = {orgUserId : this.selectedAuthorId};
            postAction(url, obj).then(res => {
                if (res.data.success) {
                    let resultData = res.data.result;
                    // this.buildResearchChart(resultData);
                    this.buildResearchPieChart(resultData);
                }
            }).catch(err => {
                console.log(err)
            })
        },
        buildResearchChart(resultData){
            let rfCharts = echarts.init(this.$refs.researchFieldChart);
            let linksArr = []
            let nodesArr = []
            let max = 0
            if (resultData.length > 0) {
                resultData.forEach(v => {
                    linksArr.push({
                        source: v.start_node,
                        target: v.end_node,
                        sourceName: v.start_node_name,
                        targetName: v.end_node_name,
                        value: v.cross_times
                    })
                    if (nodesArr.length === 0) {
                        nodesArr = [
                            {
                                id: v.start_node,
                                name: v.start_node_name,
                                value: v.cross_times
                            },
                            {
                                id: v.end_node,
                                name: v.end_node_name,
                                value: v.cross_times
                            }
                        ]
                        max = Math.max(max, v.cross_times)
                    } else {
                        const sourceItem = nodesArr.findIndex(j => j.id === v.start_node)
                        if (sourceItem < 0) { // 找不到相同的起始路段的id
                            nodesArr.push({
                                id: v.start_node,
                                name: v.start_node_name,
                                value: v.cross_times
                            })
                            max = Math.max(max, v.cross_times)
                        } else { // 累加value的值
                            nodesArr[sourceItem].value += v.cross_times
                            max = Math.max(max, nodesArr[sourceItem].value)
                        }
                        const targetItem = nodesArr.findIndex(j => j.id === v.end_node)
                        if (targetItem < 0) { // 找不到相同的结束路段的id
                            nodesArr.push({
                                id: v.end_node,
                                name: v.end_node_name,
                                value: v.cross_times
                            })
                            max = Math.max(max, v.cross_times)
                        } else { // 累加value的值
                            nodesArr[targetItem].value += v.cross_times
                            max = Math.max(max, nodesArr[targetItem].value)
                        }
                    }
                })

                nodesArr.forEach(v => { // 按照最大值平均分16等份，并设置nodes的symbolSize
                    v.symbolSize = this.averageSize(v.value, max)
                    v.category = v.name
                    v.label = {
                        normal: {
                            show: true
                        }
                    }
                })

                let sliNumer = 0
                try {
                    sliNumer = Math.ceil(nodesArr.length / 4)
                } catch (error) {
                    sliNumer = 0
                }
                if (sliNumer > 0) { // 因和弦图设置为环形状态时，默认会从90度位置顺时针旋转显示，所以把最初始的四分之一数据，添加到最后，即可实现从0度开始顺时针旋转的效果，可根据业务自定义更改数据的位置
                    let nodeCopyArr = nodesArr
                    nodesArr = (nodeCopyArr.slice(sliNumer, nodeCopyArr.length)).concat(nodeCopyArr.slice(0, sliNumer))
                }
            }
            let categoriesArr = nodesArr.length > 0 ? nodesArr.map(v => {
                return { name: v.name }
            }) : [] // 筛选出所有路段的名称
            rfCharts.setOption(
                {
                    // color: ['#ff0000', '#f00000'], // 可自定义多种颜色
                    tooltip: {},
                    animationDurationUpdate: 1500,
                    animationEasingUpdate: 'quinticInOut',
                    legend: [
                        {
                            data: nodesArr.map(function (a) {
                                return a.name;
                            })
                        }
                    ],
                    series: [
                        {
                            type: 'graph',
                            layout: 'circular',
                            top: '100px',
                            width: '50%',
                            circular: {
                                rotateLabel: true
                            },
                            data: nodesArr, // 所有路段的数据
                            links: linksArr, // 路段连接的数据
                            categories: categoriesArr, // 所有路段的名称数据
                            roam: true,
                            label: {
                                position: 'right',
                                formatter: '{b}'
                            },
                            lineStyle: {
                                color: 'source',
                                curveness: 0.3
                            }
                        }
                    ]
                }
            )
            setTimeout(function () {
                rfCharts.resize();
            }, 10)
        },
        buildResearchPieChart(resultData) {
            let rfCharts = echarts.init(this.$refs.researchFieldChart);
            let serialData = [];
            if (resultData.length > 0) {
                resultData.forEach(v => {
                    serialData.push({"name": v.field, "value": v.count})
                })
            }
            rfCharts.setOption({
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        type: 'pie',
                        radius: '50%',
                        itemStyle: {
                            borderRadius: 8
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            show: true,
                            formatter: function(params) {
                                return params.name+" （"+params.value +"）";
                            }
                        },
                        data: serialData
                    }
                ]
            }, true);
        },
        averageSize (res, max, commSize = 16) { // 平均分为16等份，等份可自定义
            const step = max / commSize
            const level = Math.ceil(res / step)
            return level * 2 + 6
        },
        // buildResearchFieldCharts(graph){
        //   let rfCharts = echarts.init(this.$refs.researchFieldChart);
        //   graph.nodes.forEach(function (node) {
        //     node.label = {
        //       show: node.symbolSize > 30
        //     };
        //   });
        //   rfCharts.setOption({
        //     title: {
        //       text: 'Les Miserables',
        //       subtext: 'Circular layout',
        //       top: 'bottom',
        //       left: 'right'
        //     },
        //     tooltip: {},
        //     legend: [
        //       {
        //         data: graph.categories.map(function (a) {
        //           return a.name;
        //         })
        //       }
        //     ],
        //     animationDurationUpdate: 1500,
        //     animationEasingUpdate: 'quinticInOut',
        //     series: [
        //       {
        //         name: 'Les Miserables',
        //         type: 'graph',
        //         layout: 'circular',
        //         circular: {
        //           rotateLabel: true
        //         },
        //         data: graph.nodes,
        //         links: graph.links,
        //         categories: graph.categories,
        //         roam: true,
        //         label: {
        //           position: 'right',
        //           formatter: '{b}'
        //         },
        //         lineStyle: {
        //           color: 'source',
        //           curveness: 0.3
        //         }
        //       }
        //     ]
        //   })
        //
        //   setTimeout(function () {
        //     rfCharts.resize();
        //   }, 10)
        // },
      getFruitWordCloudData(){
            let url = "/ndTalent/fruit/getFruitWordCloud";
            this.isHaveWordData = false;
            postAction(url, this.searchObj).then(res => {
              if (res.data.success) {
                this.isHaveWordData = true;
                // this.buildFruitWordCloudLine(res.data.result.result);
                this.wordData = res.data.result.result;
              }
            }).catch(err => {
              console.log(err)
            })
        },
        buildFruitWordCloudLine(fruitData){
            let fruitChart = echarts.init(this.$refs.fruitLineChart);
            let legendData = ["学术论文", "研究报告", "图书出版", "活动成果", "媒体成果", "荣誉信息", "专利成果", "软著成果"];
            let lineXsData = [];
            let lwSeriesData = [0,0,0,0,0];
            let bgSeriesData = [0,0,0,0,0];
            let tsSeriesData = [0,0,0,0,0];
            let hdSeriesData = [0,0,0,0,0];
            let mtSeriesData = [0,0,0,0,0];
            let rySeriesData = [0,0,0,0,0];
            let zlSeriesData = [0,0,0,0,0];
            let rzSeriesData = [0,0,0,0,0];
            //补齐近五年的值
            for(let i=4;i>=0;i--){
                let yearName = (this.currentYear-i) + "";
                lineXsData.push(yearName);
                for(let n in fruitData){
                    if(parseInt(fruitData[n].yearNum) == yearName){
                        if(fruitData[n].name == 6){
                            lwSeriesData[i] = fruitData[n].count;
                        }else if(fruitData[n].name == 3){
                            bgSeriesData[i] = fruitData[n].count;
                        }else if(fruitData[n].name == 7){
                            tsSeriesData[i] = fruitData[n].count;
                        }else if(fruitData[n].name == 4){
                            hdSeriesData[i] = fruitData[n].count;
                        }else if(fruitData[n].name == 5){
                            mtSeriesData[i] = fruitData[n].count;
                        }else if(fruitData[n].name == 8){
                            rySeriesData[i] = fruitData[n].count;
                        }else if(fruitData[n].name == 11){
                            zlSeriesData[i] = fruitData[n].count;
                        }else if(fruitData[n].name == 10){
                            rzSeriesData[i] = fruitData[n].count;
                        }
                    }
                }
            }
            fruitChart.setOption({
                legend: {
                    bottom: '1px',
                    data: legendData
                },
                grid: {
                    top: '50px',
                    bottom: '150px'
                },
                tooltip: {
                    alwaysShowContent: true,
                    trigger: 'axis',
                    extraCssText:'z-index: 7',
                    backgroundColor: '#FFFFFF',
                    textStyle:{
                        color: '#3c3520'
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: lineXsData
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '学术论文',
                        type: 'line',
                        stack: 'Total',
                        data: lwSeriesData
                    },
                    {
                        name: '研究报告',
                        type: 'line',
                        data: bgSeriesData
                    },
                    {
                        name: '图书出版',
                        type: 'line',
                        data: tsSeriesData
                    },
                    {
                        name: '活动成果',
                        type: 'line',
                        data: hdSeriesData
                    },
                    {
                        name: '媒体成果',
                        type: 'line',
                        data: mtSeriesData
                    },
                    {
                        name: '荣誉信息',
                        type: 'line',
                        data: rySeriesData
                    },
                    {
                        name: '专利成果',
                        type: 'line',
                        data: zlSeriesData
                    },
                    {
                        name: '软著成果',
                        type: 'line',
                        data: rzSeriesData
                    },
                ]
            }, true);
            setTimeout(function () {
                fruitChart.resize();
            }, 10)
        },

        getProdChartData(){
            let url = "/ndTalent/fruit/getFruitChart";

            let obj = {orgUserId : this.selectedAuthorId};
            postAction(url, obj).then(res => {
                if (res.data.success) {
                    this.buildProdDataLine(res.data.result.result);
                }
            }).catch(err => {
            })
        },
        buildFruitWordCloudChard(fruitData){
            let fruitChart = echarts.init(this.$refs.fruitLineChart);
            let legendData = ["学术论文", "研究报告", "图书出版", "活动成果", "媒体成果", "荣誉信息", "专利成果", "软著成果"];
            let lineXsData = [];
            let lwSeriesData = [0,0,0,0,0];
            let bgSeriesData = [0,0,0,0,0];
            let tsSeriesData = [0,0,0,0,0];
            let hdSeriesData = [0,0,0,0,0];
            let mtSeriesData = [0,0,0,0,0];
            let rySeriesData = [0,0,0,0,0];
            let zlSeriesData = [0,0,0,0,0];
            let rzSeriesData = [0,0,0,0,0];
            //补齐近五年的值
            for(let i=4;i>=0;i--){
                let yearName = (this.currentYear-i) + "";
                lineXsData.push(yearName);
                for(let n in fruitData){
                    if(parseInt(fruitData[n].yearNum) == yearName){
                        if(fruitData[n].name == 6){
                            lwSeriesData[i] = fruitData[n].count;
                        }else if(fruitData[n].name == 3){
                            bgSeriesData[i] = fruitData[n].count;
                        }else if(fruitData[n].name == 7){
                            tsSeriesData[i] = fruitData[n].count;
                        }else if(fruitData[n].name == 4){
                            hdSeriesData[i] = fruitData[n].count;
                        }else if(fruitData[n].name == 5){
                            mtSeriesData[i] = fruitData[n].count;
                        }else if(fruitData[n].name == 8){
                            rySeriesData[i] = fruitData[n].count;
                        }else if(fruitData[n].name == 11){
                            zlSeriesData[i] = fruitData[n].count;
                        }else if(fruitData[n].name == 10){
                            rzSeriesData[i] = fruitData[n].count;
                        }
                    }
                }
            }
            fruitChart.setOption({
                legend: {
                    bottom: '1px',
                    data: legendData
                },
                grid: {
                    top: '50px',
                    bottom: '150px'
                },
                tooltip: {
                    alwaysShowContent: true,
                    trigger: 'axis',
                    extraCssText:'z-index: 7',
                    backgroundColor: '#FFFFFF',
                    textStyle:{
                        color: '#3c3520'
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: lineXsData
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '学术论文',
                        type: 'line',
                        stack: 'Total',
                        data: lwSeriesData
                    },
                    {
                        name: '研究报告',
                        type: 'line',
                        data: bgSeriesData
                    },
                    {
                        name: '图书出版',
                        type: 'line',
                        data: tsSeriesData
                    },
                    {
                        name: '活动成果',
                        type: 'line',
                        data: hdSeriesData
                    },
                    {
                        name: '媒体成果',
                        type: 'line',
                        data: mtSeriesData
                    },
                    {
                        name: '荣誉信息',
                        type: 'line',
                        data: rySeriesData
                    },
                    {
                        name: '专利成果',
                        type: 'line',
                        data: zlSeriesData
                    },
                    {
                        name: '软著成果',
                        type: 'line',
                        data: rzSeriesData
                    },
                ]
            }, true);
            setTimeout(function () {
                fruitChart.resize();
            }, 10)
        },

        getRelatedTalentData(){
            let url = "/ndTalent/fruit/getRelatedTalentChart";

            let obj = {orgUserId : this.selectedAuthorId};
            postAction(url, obj).then(res => {
                if (res.data.success) {
                    this.buildRelatedTalentChart(res.data.result.result);
                    this.buildRankTalentChart(res.data.result.result);
                }
            }).catch(err => {
            })
        },
        buildRelatedTalentChart(fruitData){
            let fruitChart = echarts.init(this.$refs.groupTalentCharts);
            let scholarsData = fruitData.map(item=>{
                return {
                    name:item.name + "(" + item.count + ")",
                    itemStyle: {
                        normal: {
                            color: '#37A095'
                        }
                    }
                }
            })
            let links = fruitData.map(item=>{
                return {
                    source: this.selectedAuthorName,
                    target:item.name + "(" + item.count + ")",
                    label: {
                        show: false,
                    },
                    name: '合作论文数' + item.count,
                    itemStyle: {
                        normal: {
                            color: '#2b579a'
                        }
                    }
                }
            })
            fruitChart.setOption({
                tooltip: {
                    formatter: function (x) {
                        return x.data.des;
                    }
                },
                series: [{
                    type: 'graph', // 类型:关系图
                    layout: 'circular', //图的布局，类型为力导图
                    height: '90%',
                    symbol: 'roundRect',
                    symbolSize: [80, 30], // 调整节点的大小
                    roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                    // edgeSymbol: ['circle', 'arrow'],
                    edgeSymbolSize: [2, 10],
                    edgeLabel: {
                        normal: {
                            textStyle: {
                                fontSize: 20
                            },
                            show: true,
                            formatter: function (x) {
                                return x.data.name + '：' + x.data.count;
                            }
                        }
                    },
                    force: {
                        repulsion: 2500,
                        edgeLength: [10, 50]
                    },
                    // draggable: true,
                    lineStyle: {
                        normal: {
                            width: 2,
                            color: '#4b565b',
                            opacity: 0.9,
                            curveness: 0.1, // 调整连线的曲度
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            textStyle: {}
                        }
                    },

                    // 数据
                    data: [
                        {
                            name: this.selectedAuthorName,
                            itemStyle: {
                                normal: {
                                    color: '#2b579a'
                                }
                            }
                        },
                        ...scholarsData
                    ],
                    links: [
                        ...links
                    ],
                }]
            }, true);

            setTimeout(function () {
                fruitChart.resize();
            }, 10)
        },
        buildRankTalentChart(fruitData){
            let fruitChart = echarts.init(this.$refs.groupRankCharts);
            let xAxisData = fruitData.map(item=>{
                return item.name
            })
            let seriesData = fruitData.map(item=>{
                return item.count
            })
            fruitChart.setOption({
                xAxis: {
                    type: 'category',
                    data: xAxisData,
                    axisLabel: {
                        inside: false,
                        color: '#000',
                        interval: 0,
                        formatter: function(value) {
                            return value.split('').join('\n')
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    z: 10
                },
                dataZoom: [
                    {
                        type: 'inside'
                    }
                ],
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    alwaysShowContent: true,
                    trigger: 'axis',
                    extraCssText:'z-index: 7',
                    backgroundColor: '#FFFFFF',
                    textStyle:{
                        color: '#3c3520'
                    }
                },
                series: [
                    {
                        data: seriesData,
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#79DBBA' },
                                { offset: 0.5, color: '#3FA598' },
                                { offset: 1, color: '#008080' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#79DBBA' },
                                    { offset: 0.5, color: '#3FA598' },
                                    { offset: 1, color: '#008080' }
                                ])
                            }
                        },
                    }
                ]
            }, true);

            setTimeout(function () {
                fruitChart.resize();
            }, 10)
        },
        getRecommendTalent(fieldNames){
            let url = "/ndTalent/fruit/getRecommendTalent";

            let obj = {orgUserId : this.selectedAuthorId, fieldNames: fieldNames};
            postAction(url, obj).then(res => {
                if (res.data.success) {
                    // this.buildRelatedTalentChart(res.data.result.result);
                    // this.buildRankTalentChart(res.data.result.result);
                    this.talentRecommendData = res.data.result.result;
                }
            }).catch(err => {
            })
        },
        showFruitInfo(item){
            this.$nextTick(()=>{
                this.$refs.fruitInfo.showModalInfo(item);
            })
        },
    }
}
</script>
<style scoped>

.sit{
    line-height: 100px;
    color: rgba(3, 129, 129, 1);
    font-size: 48px;
    text-align: center;
}
.searchIpt {
    height: 200px;
    width: 800px;
    margin: 200px auto;
}
.cardTit{
    border-radius: 50px;
    font-weight: bold;
    margin-top: 20px;
    font-size: 16px;
    color: #ffffff;
    background: linear-gradient(90.7deg, rgba(24,149,131,1) 3.45%,rgba(255,255,255,1) 97.86%);
}

.fruit-type-name{
    text-align: center;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    font-weight: 400;
}

.fruit-type-name-default{
    font-size: 16px;
    background-color: rgba(90, 216, 166, 1);;
    color: #ffffff;
}

.fruit-type-name-append{
    font-size: 20px;
    background-color: #189583;
    color: #ffffff;
}

.typeRadius-left{
    border-radius: 10px 0 0 10px;
}

.typeRadius-right{
    border-radius: 0 10px 10px 0;
}
.ft{
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
}
.pag{
    padding: 5px 20px;
    text-align: center;
}

.tjt{
    color: #038181;
    font-weight: bold;
    font-size: 20px;
    padding-left: 20px;
    line-height: 60px;
    background-color: rgba(239, 250, 251, 1);
    border-radius: 10px;
}

.tct{
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    line-height: 60px;
    text-align: center;
    background: linear-gradient(90.45deg, rgba(84,211,170,1) 0.01%,rgba(147,227,201,1) 100.02%);
}

.ctc{
    padding: 10px;
    line-height: 26px;
    font-size: 18px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
}

.rd{
    border-radius: 0 0 10px 10px;
}

#components-back-top-demo-custom .ant-back-top {
    bottom: 100px;
}
#components-back-top-demo-custom .ant-back-top-inner {
    height: 40px;
    width: 40px;
    line-height: 40px;
    border-radius: 4px;
    background-color: rgba(0, 128, 128, 1);
    color: #fff;
    text-align: center;
    font-size: 20px;
}
</style>